<template>
  <div class="class">
    <!-- 搜索框 -->
    <div @click="toSearch">
      <van-search placeholder="请输入搜索关键词" v-model="value" />
    </div>
    <!-- 侧边栏 -->
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey" @change="bigchange(activeKey)">
          <van-sidebar-item
            v-for="(item, index) in BigClassList"
            :key="index"
            :title="item.class_name"
          />
        </van-sidebar>
      </van-col>
      <!-- 宫格 -->
      <van-col span="18">
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="item in MiddleClassList" :key="item.id" @click="toChildren(item.id,item.class_name)">
            <div>
              <van-image :src="item.class_image" />
            </div>
            <div>
              <span>{{item.class_name}}</span>
            </div>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      activeKey: 0, // 侧边栏选中 索引
      BigClassList: [], // 大分类数据
      MiddleClassList: [] // 小分类数据
    };
  },
  methods: {
    // 大分类
    getBigClass() {
      this.$http.get("/big_class").then(res => {
        this.BigClassList = res.data.data;
      });
    },
    // 小分类
    getMiddle(id) {
      this.$http
        .get("/middle_class", {
          params: {
            id: id + 1
          }
        })
        .then(res => {
          this.MiddleClassList = res.data.data;
        });
    },
    // 小分类切换时触发
    bigchange(id) {
      this.getMiddle(id);
    },
    // 点击搜索框跳转搜索页
    toSearch() {
      this.$router.push({ path: "/start_search", query: { name: "class" } });
    },
    // 去子页面
    toChildren(id,name){
      this.$router.push({path:'/class_children',query:{id:id,name:name}})
    }
  },
  created() {
    this.getBigClass();
    this.getMiddle(this.activeKey);
  }
};
</script>